<template>
    <div class="components-container">
        <!-- 编辑 -->
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="800">
            <h3>{{title}} </h3>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>单位信息</legend>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">单位名称<span class="text-danger">*</span></label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTNAME" placeholder="请输入单位名称"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">坐落地址</label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTLOCATION" placeholder="请输入坐落地址"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">建设时间<span class="text-danger">*</span></label>
                        <div class="layui-input-inline">
                             <el-date-picker v-model="ashUseData.UNTBUILDDATE" type="date" placeholder="请输入建设时间"></el-date-picker>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">类别</label>
                        <div class="layui-input-inline">
                            <el-select v-model="ashUseData.UNTTYPE" placeholder="请选择类别">
                                <el-option v-for="item in UnttypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">墓区绿化率</label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTGREENRATE" placeholder="请输入墓区绿化率"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">单座墓穴面积</label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTSINGLEAREA" placeholder="请输入单座墓穴面积"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">是否审批</label>
                        <div class="layui-input-inline">
                            <el-select v-model="ashUseData.UNTISAPPROVE" placeholder="请选择是否审批">
                                <el-option v-for="item in UntisapproveOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </div>
                        
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">审批总面积</label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTAPVTOTALAREA" placeholder="请输入审批总面积"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">已使用面积<span class="text-danger">*</span></label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTUSEDAREA" placeholder="请输入已使用面积"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">剩余总面积</label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTSURPLUSTOTALAREA" placeholder="请输入剩余总面积"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">已建墓穴数量<span class="text-danger">*</span></label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTBUILDENUM" placeholder="请输入已建墓穴数量"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">已使用墓穴总数量</label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTUSEDTOTALNUM" placeholder="请输入已使用墓穴总数量"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">剩余墓穴数量<span class="text-danger">*</span></label>
                        <div class="layui-input-inline">
                            <el-input v-model="ashUseData.UNTSURPLUSNUM" placeholder="请输入剩余墓穴数量"></el-input>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户组</label>
                        <div class="layui-input-inline">
                            <el-cascader :options="UntyuseroupOptions" v-model="carryArea" filterable :show-all-levels="false" change-on-select>
                            </el-cascader>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <el-input v-model="ashUseData.UNTRENARK" style="width:545px" placeholder="请输入备注"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">简介</label>
                            <div class="layui-input-inline">
                                <el-input v-model="ashUseData.UNTINTRODUCTION" style="width:545px" placeholder="请输入简介"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :file-list="fileList"
                            :auto-upload="false"
                            :http-request="upload">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submit">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                </div>
            </fieldset>
            <div class="layui-form-item btnCenter">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitone">提交</el-button>
            </div>
        </sweet-modal>
    </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
.layui-form-label {
  width: 140px;
}
</style>
<script>
import sweetModal from "@/components/sweetModal";
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
const ADD = "新增";
const MODIFY = "修改";
const DELETE = "删除";
const INFO = "详情";
export default {
  name: "assUseMain",
  mixins: [manage],
  data() {
    return {
      ashUseData: {},
      regList: {},
      statusTypes: {},
      ashTypes: {},
      xblx: [],
      selectstatus: null,
      fileList:[],
      UnttypeOptions:[],
      UntyuseroupOptions: [],
      UntisapproveOptions:[
            {
              label:'未审批',
              value:'0',
            },
            {
              label:'已审批',
              value:'1',
            },
      ],
      title:null,
      carryArea:[],
      UNTID: null,
    };
  },
  methods: {
    open(order, obj) {
      this.order = order;
      this.selectstatus = false;
      this.dataRepeat();
      switch (this.order) {
        case ADD:
          this.title = "单位新增";
          this.$refs.dialog.open();
          break;
        case MODIFY:
            this.UNTID = obj.UNTID;
          this.selectstatus = true;
          this.title = "单位修改";
          this.dataInfo(obj.UNTID);
          this.$refs.dialog.open();
          break;
        case INFO:
            this.UNTID = obj.UNTID;
          this.title = "单位详情";
          this.dataInfo(obj.UNTID);
          this.$refs.dialog.open();
          break;
        default:
      }
    },
    //提交
    submitone() {
      switch (this.order) {
        case ADD:
          this.dataAdd();
          break;
        case MODIFY:
          this.dataModify();
          break;
        case INFO:
          this.dataReg();
          break;
        default:
      }
    },
    //数据重置
    dataRepeat() {
      this.ashUseData = {};
      this.regList = {};
      this.carryArea = [];
    },
    //新增
    dataAdd() {
      let Data = JSON.parse(JSON.stringify(this.ashUseData));
      Data.UNTUSERGROUP = this.carryArea[this.carryArea.length - 1];
      Data.UNTBUILDDATE = formatDate(Data.UNTBUILDDATE, "yyyyMMdd");
      apiBase.DoService(Data, apiBase.getApiAdress().Unit.Create, res => {
        this.refreshData();
        this.$refs.dialog.close();
        this.$message({
          message: this.order + res.data.msg,
          type: "success"
        });
      });
    },
    //详情
    dataInfo(id) {
      var data = {
        UNTID: id
      };
      apiBase.DoService(data, apiBase.getApiAdress().Unit.Detail, res => {
        this.ashUseData = res.data.content;
        let currentArea = [];
        let addrId = this.ashUseData.UNTUSERGROUP;
        this.UntyuseroupOptions.forEach(function(value, index, arr) {
            value.children.forEach(function(v, i, a) {
              if (v.value == addrId) {
                currentArea.push(v.ADDTOPID, v.value);
              }
            });
          });
          this.carryArea = currentArea;
      });
    },
    //修改
    dataModify() {
      let Data = JSON.parse(JSON.stringify(this.ashUseData));
      Data.UNTUSERGROUP = this.carryArea[this.carryArea.length - 1];
      Data.UNTBUILDDATE = formatDate(this.ashUseData.UNTBUILDDATE, "yyyyMMdd");
      Data.UNTID = this.UNTID
      apiBase.DoService(Data, apiBase.getApiAdress().Unit.Modify, res => {
        this.refreshData();
        this.$message({
          message: this.order + res.data.msg,
          type: "success"
        });
        this.$refs.dialog.close();
      });
    },
    inputDisable() {},
    upload(file){
        console.log(file)
        console.log(this.fileList)
    },
    submit(){
        this.$refs.upload.submit();
    },
    handleChange(){

    },
    refreshData() {
      this.$emit("refreshData");
    }
  },
  created() {
    var data = {
        type: '单位类别'
    };
    apiBase.DoService(
        data,
        apiBase.getApiAdress().Code.GetType,
        res => {
            let cardata = res.data.content;
            this.UnttypeOptions = cardata.map(item => ({
                value: item.CodeValue,
                label: item.CodeName,
            }));
        });
    apiBase.DoService(
        {},
        apiBase.getApiAdress().Code.GetAddressMap,
        res => {
            let cardata = res.data.content;
            this.UntyuseroupOptions = cardata.map(item => ({
                value: item.ADDID,
                label: item.ADDNAME,
                ADDLEVEL: item.ADDLEVEL,
                ADDTOPID: item.ADDTOPID,
                children: item.Children.map(itemStr => ({
                value: itemStr.ADDID,
                label: itemStr.ADDNAME,
                ADDLEVEL: itemStr.ADDLEVEL,
                ADDTOPID: itemStr.ADDTOPID
                }))
            }));
        });
  },
  components: {
    sweetModal
  }
};
</script>

